<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <!--  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="/css/element-index.css">
    <style type="text/css">
        #app {
            width: 1024px;
            margin: 0 auto;
        }

        #userTable {
            margin-top: 20px;
        }

        #add-room-btn {
            margin-top: 20px;
            margin-left: 20px;
        }
    </style>
</head>

<body>
<div id="app">

    <el-row :gutter="20">
        <!-- 展示房间列表 -->
        <el-col :span="6">
            <div>
                <h2>房间列表</h2>
            </div>
        </el-col>
        <!-- 添加房间的按钮 -->
        <el-col :span="6" :offset="12">
            <div id="add-room-btn">
                <el-button type="primary" icon="el-icon-plus" round @click="dialogAddRoomFormVisible = true">添加房间
                </el-button>
            </div>
        </el-col>
    </el-row>

    <!-- 展现房间列表的表格 -->
    <div id="userTable">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="roomID" label="房间号码" width="200"></el-table-column>
            <el-table-column prop="floor" label="所在楼层" width="200"></el-table-column>
            <el-table-column prop="roomTelephone" label="电话号码" width="200"></el-table-column>
            <el-table-column prop="typeName" label="房间类型" width="200"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- 编辑房间按钮 -->
                    <el-button type="primary" icon="el-icon-edit" circle @click="editRoom(scope.row,scope.$index)">
                    </el-button>
                    <!-- 删除房间按钮 -->
                    <el-button type="danger" icon="el-icon-delete" circle @click="deleteRoom(scope.$index)">
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <!-- 添加新房间所需的表单对话框，初始是隐藏的 -->
    <el-dialog title="添加新的房间" :visible.sync="dialogAddRoomFormVisible" width="25%">
        <el-form ref="addRoomInfo" :model="addRoomInfo" label-width="95px">
            <el-form-item label="房号">
                <el-input v-model="addRoomInfo.roomID"></el-input>
            </el-form-item>
            <el-form-item label="楼层">
                <el-input v-model="addRoomInfo.floor"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input v-model="addRoomInfo.roomTelephone"></el-input>
            </el-form-item>
            <el-form-item label="房间类型">
                <el-input v-model="addRoomInfo.typeName"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddRoomFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addRoom">添加</el-button>
        </div>
    </el-dialog>
    <!-- 编辑特定房间所需的表单对话框，初始是隐藏的 -->
    <el-dialog title="编辑房间信息" :visible.sync="dialogUpdateRoomFormVisible" width="25%">
        <el-form ref="editRoomInfo" :model="editRoomInfo" label-width="95px">
            <el-form-item label="房号">
                <el-input v-model="editRoomInfo.roomID"></el-input>
            </el-form-item>
            <el-form-item label="楼层">
                <el-input v-model="editRoomInfo.floor"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input v-model="editRoomInfo.roomTelephone"></el-input>
            </el-form-item>
            <el-form-item label="房间类型">
                <el-input v-model="editRoomInfo.typeName"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUpdateRoomFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateRoom">更新</el-button>
        </div>
    </el-dialog>
</div>

<!-- import Vue before Element -->
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>cdn引入方式-->
<script type="text/javascript" src="/js/vue.js"></script>
<!-- import axios -->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<script type="text/javascript" src="/js/axios.js"></script>
<!-- import JavaScript -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<script type="text/javascript" src="/js/element-index.js"></script>

<!-- vue实例脚本 -->
<script>
    var app = new Vue({
            el: '#app',
            data: {
                tableData: [], //存放房间数据(对象数组)
                dialogAddRoomFormVisible: false,
                addRoomInfo: {  //存储 添加房间的信息
                    roomID: 0,//房号
                    floor: 0,//房间楼层
                    roomTelephone: 0,//房间电话号码
                    typeName: '',//房间类型
                },
                dialogUpdateRoomFormVisible: false,
                editRoomInfo: { //存储 要更新（编辑）房间的信息
                    roomID: 0,//房号
                    floor: 0,//房间楼层
                    roomTelephone: 0,//房间电话号码
                    typeName: '',//房间类型
                    indexOfItem: 0//编辑房间在数组对象的索引
                }
            },
            methods: {
                //删除一个房间
                deleteRoom(index) {
                    this.$confirm('此操作将永久删除此房间所有信息, 是否继续?', '警告', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                        let roomID = this.tableData[index].roomID; //存放对应房间对象在数据库中的主键roomID
                        //发送ajax请求
                        axios.delete('http://localhost:8080/rooms/' + roomID)
                            .then(function (response) {
                                // 数组删除某些元素语法：objArray.splice(index,cnt) :删除从第index个元素开始的cnt个元素
                                self.tableData.splice(index, 1);
                                self.$notify({
                                    title: '成功',
                                    message: '删除了一个房间所有信息',
                                    type: 'success'
                                });
                            }).catch(() => {
                        });
                    })
                        .catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消删除'
                            });
                        })
                        .finally(function () {
                            // always executed
                        });
                },
                //编辑一个房间信息
                editRoom(room, index) {
                    this.editRoomInfo.roomID = room.roomID;
                    this.editRoomInfo.floor = room.floor;
                    this.editRoomInfo.roomTelephone = room.roomTelephone;
                    this.editRoomInfo.typeName = room.typeName;
                    this.editRoomInfo.indexOfItem = index;  //更新索引
                    this.dialogUpdateRoomFormVisible = true;
                },
                //更新一个房间信息
                updateRoom() {
                    let newRoom = {
                        roomID: 0,//房号
                        floor: 0,//房间楼层
                        roomTelephone: 0,//房间电话号码
                        typeName: '',//房间类型
                    };
                    newRoom.roomID = this.editRoomInfo.roomID;
                    newRoom.floor = this.editRoomInfo.floor;
                    newRoom.roomTelephone = this.editRoomInfo.roomTelephone;
                    newRoom.typeName = this.editRoomInfo.typeName;

                    let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面

                    //发送ajax请求到服务器端更新 房间信息
                    axios.put('http://localhost:8080/rooms', {
                        roomID: newRoom.roomID,//房号
                        floor: newRoom.floor,//房间楼层
                        roomTelephone: newRoom.roomTelephone,//房间电话号码
                        typeName: newRoom.typeName,//房间类型
                    })
                        .then(function (response) {
                            Vue.set(self.tableData, self.editRoomInfo.indexOfItem, newRoom);
                            self.dialogUpdateRoomFormVisible = false;
                            self.$notify({
                                title: '成功',
                                message: '修改信息成功',
                                type: 'success'
                            });
                        })
                        .catch(function (error) {
                            // handle error
                            console.log(error);
                        })
                        .finally(function () {
                            // always executed
                        });
                },
                //添加一个房间
                addRoom() {

                    let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                    let newRoom = {  //添加用户的表单
                        roomID: 0,//房号
                        floor: 0,//房间楼层
                        roomTelephone: 0,//房间电话号码
                        typeName: '',//房间类型
                    };

                    newRoom.roomID = this.addRoomInfo.roomID;
                    newRoom.floor = this.addRoomInfo.floor;
                    newRoom.roomTelephone = this.addRoomInfo.roomTelephone;
                    newRoom.typeName = this.addRoomInfo.typeName;

                    // 发送ajax数据获取管理员列表数据
                    axios.post('http://localhost:8080/rooms', {
                        roomID: newRoom.roomID,
                        floor: newRoom.floor,
                        roomTelephone: newRoom.roomTelephone,
                        typeName: newRoom.typeName
                    })
                        .then(function (response) {
                            //在axios里面用self来引用vue实例，因为在axios作用域内this不是vue实例，而是全局对象window
                            self.tableData.push(newRoom);
                            self.dialogAddRoomFormVisible = false;

                            self.$notify({
                                title: '成功',
                                message: '创建了一个新的房间',
                                type: 'success'
                            });
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },

            // 生命周期函数created:在vue实例加载完成后，发送ajax请求，用返回的数据填充页面
            created: function () {
                // 发送ajax数据获取房间列表数据
                let self = this;//因为在axios里面访问this是window对象，我们先将vue实例保存在self变量里面
                axios.get('http://localhost:8080/rooms')
                    .then(function (response) {
                        self.tableData = response.data;//通过self间接访问vue实例
                    })
                    .catch(function (error) {
                        // handle error
                        console.log(error);
                    })
                    .finally(function () {
                        // always executed
                    });
            }
        }
    );
</script>


</body>

</html>